<template>

  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="16">
          <el-card>
            <el-button type="info"></el-button>
            可选座位
            <el-button type="danger"></el-button>
            已售座位
            <el-button type="success"></el-button>
            已选座位
            <div style="padding-left: 250px"><h2>请选择你的座位</h2></div>

            <el-row v-for="row in seats" style="margin-bottom: 20px">
              <el-button v-for="col in row"
                         :type="typeStatus(col)"
                         :disabled="col.sale"
                         @click="handleSelect(col)">{{ col.sno }}
              </el-button>
            </el-row>
          </el-card>
      </el-col>
      <el-col :span="6">
        <el-card >
          <div v-for="m in movie">
            <div>
              <a href="" ><img :src=m.imgUrl style="width: 50%;height: 50%"></a>
            </div>
            <div style="margin: 0 auto">
              <p id="title">{{m.title}}</p>
            </div>
          </div>
          <ul class="info-list" v-for="m in movie" style="font: 13px Helvetica,Arial,sans-serif;list-style: none">
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">类型:</span>
              <span class="info-item-val">{{ m.category }}</span>
            </li>
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">影院:</span>
              <span class="info-item-val">{{m.cinema}}</span>
            </li>
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">影厅:</span>
              <span class="info-item-val">{{m.movieHall}}</span>
            </li>
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">版本:</span>
              <span class="info-item-val">{{m.version}}</span>
            </li>
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">场次:</span>
              <span class="info-item-val">{{m.session}}</span>
            </li>
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">票价:</span>
              <span class="info-item-val">￥{{m.price}}/张</span>
            </li>
            <hr>
            <li class="info-item" style="margin-bottom: 5px">
              <span class="info-item-key">座位:</span>
              <span class="info-item-val">一次最多选6张</span>
            </li>
            <li class="info-item" style="margin-bottom: 5px">
              <span>总价:</span>
              <span class="info-item-val" style="color: red; font-size: 24px">￥0</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import {ref} from "vue";

const seats = ref([
  [
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: true},
    {id: 3, sno: "1-3", selected: false, sale: false}
  ],
  [
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: false},
    {id: 3, sno: "1-3", selected: false, sale: true}
  ],
  [
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: true},
    {id: 3, sno: "1-3", selected: false, sale: false}
  ],
  [
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: false},
    {id: 3, sno: "1-3", selected: false, sale: true}
  ],
  [
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: true},
    {id: 3, sno: "1-3", selected: false, sale: false}
  ],
  [
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: false},
    {id: 3, sno: "1-3", selected: false, sale: true},
    {id: 1, sno: "1-1", selected: false, sale: false},
    {id: 2, sno: "1-2", selected: false, sale: false},
    {id: 3, sno: "1-3", selected: false, sale: true}
  ],
])

const selectedSeats = ref([]);

const movie = ref([
  {
    "title":"蜡笔小新：新次元！超能力大决战",
    "imgUrl":"/imgs/img.png",
    "category":"喜剧片",
    "cinema":"SFC上影国际影城（里建店）",
    "movieHall":"4号Real3D普通厅",
    "version":"日语2D",
    "session":"11月27 22:00",
    "price":"28"
  }
])

const typeStatus = (col) => {
  return col.sale ? 'danger' : (col.selected ? 'success' : 'info')
}

const handleSelect = (col) => {
  col.selected = !col.selected
  if (col.selected) {
    selectedSeats.value.push(col)
    console.log(selectedSeats.value)
  } else {
    //从selectedSeats移除col
    selectedSeats.value = selectedSeats.value.filter(seat => {
      return seat.selected;
    })
    console.log(selectedSeats.value)
  }


}

</script>

<style scoped>
  #title{
    font-size: 20px;
    font-weight: 700;
    color: #333;
  }

 .info-item-key{
   color: #999999;
 }
</style>
